<template>
  <div class="portrayalType">
    <el-row style="margin-top: 25px;">
      <el-col :span="6" style="text-align: center; border: 0">
        <div class="wt-title">
          <div>
            识别恶性负载共 <span>{{ data.count || 0 }}</span> 条
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="text-align: center">
        <div class="ring">
          <div class="ring-child">
            <div class="num">{{ data.countBetween50And80 || 0 }}</div>
            <div class="label">精度>=80%</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="text-align: center">
        <div class="ring blue">
          <div class="ring-child">
            <div class="num">{{ data.countMoreThan80 || 0 }}</div>
            <div class="label" style="position: relative; left: -18px">
              80%>精度>=50%
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" style="text-align: center; border: 0">
        <div class="ring yellow">
          <div class="ring-child">
            <div class="num">{{ data.countUnder50 || 0 }}</div>
            <div class="label" style="position: relative; left: 7px">精度&lt;50%</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "portrayalType",
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

  <style scoped lang="scss">
.el-col {
  border-right: 1px solid #c4c4c4;
}
.portrayalType {
  .wt-title {
    width: 100%;
    height: 150px;

    text-align: center;
    color: #333333;
    font-weight: bold;
    div {
      border-right: 1px solid #c4c4c4;
      height: 100px;
      padding-top: 40px;
    }
    span {
      font-size: 35px;
    }
  }
}
.ring {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #FF0A3E;
  border-radius: 50%;
  position: relative;
}
.ring-child {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  top: 10px;
  left: 10px;
  .num {
    padding-top: 25px;
    font-size: 30px;
    font-weight: bold;
  }
  .label {
    width: 200px;
    text-align: left;
    margin-top: 50px;
  }
}
.blue {
  background: #FAD42C;
}
.yellow {
  background: #FF871F ;
}
</style>
